<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<title>test</title>
	<script src="scripts/boilerplate/lib/require.js"></script>
	<script type="text/javascript">
	var ws = new WebSocket('ws://10.243.41.52:5050');
	
	ws.onopen = function() {
		console.log('hello!');
	};
	
    ws.onmessage = function(content) {
    	var message = JSON.parse(content.data);
    	console.log(message.action);
    	if(message.action === 'initPlayerId') {
    		document.getElementById('player-id').innerHTML = message.params.playerId;
    	}
    };
    
	var interval = setInterval(function() {
    	console.log('ready state : ' + ws.readyState);
    	if(ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.OPEN) {
    		clearInterval(interval);
    	}
    });
	
	function move() {
		var data = {
			action: 'move',
			params: { distance: parseInt(Math.random() * 10) }
		};
		
		ws.send(JSON.stringify(data));
	}
	
	function shoot() {
		var data = {
			action: 'shoot',
			params: { x: parseInt(Math.random() * 100) }
		};
		
		ws.send(JSON.stringify(data));
	}
	
	</script>
</head>
<body>
<button id="move-button" onclick="move();">Move</button>
<button id="shoot-button" onclick="shoot();">Shoot</button>
<div id="player-id"></div>
</body>
</html>